$(function () {

    // 1 初始化 表单组件
    function initComponent() {

        // 1.1 处理 封面上传即时显示
        function renderCover() {

            $("#inputCover").change(function () {

                const file = this.files[0];
                // console.log(file);

                const src = URL.createObjectURL(file);
                // console.log(src);

                $("#coverimg").prop("src", src);

            })
        }



        // 1.2 处理 文章类别
        function getCategorytList() {
            $.get('/admin/category/list', function (res) {
                // console.log(res);
                let html = "<option value=''>所有分类</option>";

                res.data.forEach(item => {
                    html += `<option value="${item.id}" >${item.name}</option>`
                });

                $("#category").html(html);
            })
        }



        // 1.3 处理 日期选择框
        function DateSelectionBox() {

            //执行一个laydate实例
            layui.laydate.render({
                elem: '#articleDate' //指定元素
            });


            // document.querySelector('button').onclick = function () {
            //     console.log(document.querySelector('#articleDate').value);
            // }
        }



        // 1.4 处理 富文本
        function RichText() {
            tinymce.init({
                selector: '#articleContent',
                language: 'zh_CN',//注意大小写
            });
        }








        // 1.1 处理 封面上传即时显示
        renderCover()
        // 1.2 处理 文章类别
        getCategorytList()
        // 1.3 处理 日期选择框
        DateSelectionBox()
        // 1.4 处理 富文本
        RichText()



    }
    // 1 初始化 表单组件
    initComponent()


    // 给发布按钮 绑定点击事件
    $('.btn-edit').on('click', function () {

        postArticle('已发布')

    })
    // 给草稿按钮 绑定点击事件
    $('.btn-draft').on('click', function () {
        postArticle()
    })




    // 封装代码
    function postArticle(state = "") {
        const formdata = new FormData($('form')[0]);
        console.log(formdata);

        // 拼接参数
        formdata.append('content', tinyMCE.editors['articleContent'].getContent())
        formdata.append('state', state)

        // ajax发送请求
        $.ajax({
            url: '/admin/article/publish',
            type: 'post',
            data: formdata,
            contentType: false,
            processData: false,
            success(res) {
                console.log(res);

                // 显示提示框 提示用户发布成功 
                // 设定一个延时器  1.5s  再去跳转 到 文章列表页面即可
                layer.msg(res.msg);
                setTimeout(() => {
                    location.href = "article_list.html";
                }, 1500);
            }
        })
    }



})